<template>
  <!-- 引入container布局 -->
    <el-container class="home-container">
        <!-- 头部 -->
  <el-header> 
      <div>
          <img src="../assets/logo.png" alt/>
          <span>电商管理平台</span>
      </div>
        <el-menu
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b">
        <el-menu-item index="1" @click="personal">
            <svg class="icon" aria-hidden="true"> 
            <use xlink:href="#icon-gerenxinxi"></use>
            </svg>
            个人信息</el-menu-item>
        <el-menu-item index="2" @click="shop">
            <svg class="icon" aria-hidden="true"> 
            <use xlink:href="#icon-dianpu"></use>
            </svg>
            店铺信息</el-menu-item>
        <el-menu-item index="3" @click="follow">
            <svg class="icon" aria-hidden="true"> 
            <use xlink:href="#icon-wodeguanzhu"></use>
            </svg>
            关注用户情况</el-menu-item>
        </el-menu>
        <el-button type="info" @click="logout" style="position: absolute;right:10px;">安全退出</el-button>
    </el-header>
     <!-- 侧边栏 -->
    <el-container>
    <el-aside width="190px">
        <el-row class="tac" style="height: 100%">
        <el-col style="height: 100%">
        <el-menu
            
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b"
            style="height: 100%"    >
            <el-menu-item index="1" @click="home">
                <svg class="icon" aria-hidden="true"> 
                <use xlink:href="#icon-shouye_huaban1"></use>
                </svg>
                <span slot="title" >首页</span>
            </el-menu-item>
            <el-menu-item index="2" @click="order">
                <svg class="icon" aria-hidden="true"> 
                <use xlink:href="#icon-dingdan"></use>
                </svg>
                <span slot="title" >订单处理中心</span>
            </el-menu-item>
            <el-menu-item index="3" @click="shopManage">
                <svg class="icon" aria-hidden="true"> 
                <use xlink:href="#icon-shangpin1"></use>
                </svg>
                <span slot="title" >商品管理</span>
            </el-menu-item>
            </el-menu>
        </el-col>
        </el-row> 
        </el-aside>
        <!-- Main区域 -->
      <el-container>
      <el-main width="-100px">
          <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/' }">电商管理平台</el-breadcrumb-item>
          <el-breadcrumb-item><a href="/">个人信息</a></el-breadcrumb-item>
          </el-breadcrumb>
          <template>
        </template>
            <el-button type="primary"  round style="align-items: center;position:absolute;right:10px;" @click="dialogFormVisible = true" >点击编辑个人信息</el-button>
            <el-dialog :visible.sync="dialogFormVisible">
            <el-form :model="personalInfo[0]">
                <el-form-item label="用户ID" :label-width="formLabelWidth">
                <el-input v-model="personalInfo[0].id" autocomplete="off" disabled></el-input>
                </el-form-item>
                <el-form-item label="真实姓名" :label-width="formLabelWidth">
                <el-input v-model="personalInfo[0].userTName" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="用户类型" :label-width="formLabelWidth">
                <el-input v-model="personalInfo[0].type" autocomplete="off" disabled></el-input>
                </el-form-item>
                <el-form-item label="身份证类型" :label-width="formLabelWidth">
                <el-select v-model="personalInfo[0].idCardType" placeholder="请选择身份证类型">
                    <el-option label="居民身份证" value="居民身份证"></el-option>
                    <el-option label="临时身份证" value="临时身份证"></el-option>
                    <el-option label="护照" value="护照"></el-option>
                    <el-option label="港澳居民来往内地通行证" value="港澳居民来往内地通行证"></el-option>
                    <el-option label="中华人民共和国来往港澳通行证" value="中华人民共和国来往港澳通行证"></el-option>
                    <el-option label="台湾居民来往大陆通行证" value="台湾居民来往大陆通行证"></el-option>
                    <el-option label="大陆居民往来台湾通行证" value="大陆居民往来台湾通行证"></el-option>
                </el-select>
                </el-form-item>
                <el-form-item label="身份证号" :label-width="formLabelWidth">
                <el-input v-model="personalInfo[0].idCard" autocomplete="off" ></el-input>
                </el-form-item>
                <el-form-item label="生日" :label-width="formLabelWidth">
                <el-input v-model="personalInfo[0].birthday" autocomplete="off" ></el-input>
                </el-form-item>
                <el-form-item label="邮箱" :label-width="formLabelWidth">
                <el-input v-model="personalInfo[0].userMail" autocomplete="off" ></el-input>
                </el-form-item>
                <el-form-item label="登录账号" :label-width="formLabelWidth">
                <el-input v-model="personalInfo[0].userFName" autocomplete="off" disabled></el-input>
                </el-form-item>
                <el-form-item label="地址" :label-width="formLabelWidth">
                <el-input v-model="personalInfo[0].address" autocomplete="off" ></el-input>
                </el-form-item>
            </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="updatePersonalInfo">确 定</el-button>
                </div>
            </el-dialog>
            <!-- 信息栏 -->
            <el-descriptions  direction="vertical" :column="4" border style="width:100%; height:90%" :data="personalInfo">
            <el-descriptions-item > 
                <template slot="label"><i class="el-icon-user"></i>用户ID</template>{{this.personalInfo[0].id}}
            </el-descriptions-item>
            <el-descriptions-item >
                <template slot="label"><i class="el-icon-s-custom"></i>真实姓名</template>{{this.personalInfo[0].userTName}}
            </el-descriptions-item>
            <el-descriptions-item >
                <template slot="label"><i class="el-icon-s-opportunity"></i>用户类型</template>{{this.personalInfo[0].type}}
            </el-descriptions-item>
            <el-descriptions-item >
                <template slot="label"><i class="el-icon-s-check"></i>身份证类型</template>{{this.personalInfo[0].idCardType}}
            </el-descriptions-item>
            <el-descriptions-item >
                <template slot="label"><i class="el-icon-s-finance"></i>身份证号</template>{{this.personalInfo[0].idCard}}
            </el-descriptions-item>
            <el-descriptions-item >
                <template slot="label"><i class="el-icon-orange"></i>生日</template>{{this.personalInfo[0].birthday}}
            </el-descriptions-item>
            <el-descriptions-item >
                <template slot="label"><i class="el-icon-info"></i>邮箱</template>{{this.personalInfo[0].userMail}}
            </el-descriptions-item>
            <el-descriptions-item >
                <template slot="label"><i class="el-icon-connection"></i>登录账号</template><el-tag size="small">{{this.personalInfo[0].userFName}}
            </el-tag></el-descriptions-item>
            <el-descriptions-item >
                <template slot="label"><i class="el-icon-location-information"></i>地址</template>{{this.personalInfo[0].address}}
            </el-descriptions-item>
            </el-descriptions>
           
      </el-main>
      </el-container>

  </el-container>
</el-container>
</template>
<script>
export default{
     data() {
      return {
        activeIndex: '1',
        activeIndex2: '1',
        labelPosition: 'right',
        personalInfo:[{
            id:'',
            userTName:'',
            type:'',
            idCardType:'',
            idCard:'',
            birthday:'',
            userMail:'',
            userFName:'',
            address:'',
        }],
        //显示和隐藏修改用户栏
        dialogFormVisible: false,
        formLabelWidth: '120px',
      }
    },
      created(){
        this.getPersonalInfo();
    },
    methods:{
        
        // 安全退出
        logout(){
            window.sessionStorage.clear();  //清楚session
            this.$router.push("/login");    //回到首页
        },
        handleSelect(key, keyPath) {
        console.log(key, keyPath);      // 顶部栏
      },
       handleOpen(key, keyPath) {     // 侧边栏
        console.log(key, keyPath);
      },
       handleClose(key, keyPath) {
        console.log(key, keyPath);
      },
      // 处理时间显示时间戳问题
      fmtDate(obj){
        var date =  new Date(obj);
        var y = 1900+date.getYear();
        var m = "0"+(date.getMonth()+1);
        var d = "0"+date.getDate();
        return y+"-"+m.substring(m.length-2,m.length)+"-"+d.substring(d.length-2,d.length);
      },
      async getPersonalInfo(){       // 获取个人信息列表
          const {data :personal} = await this.$http.get("personalInfo"); // 访问后台  
          this.personalInfo = personal.personal;
          this.personalInfo.map(item=>{
            item.birthday = this.fmtDate(item.birthday);
          });
      },
      // 编辑个人信息
      updatePersonalInfo(){
          console.log(this.personalInfo[0]);
          const params={
                  id:this.personalInfo[0].id,
                  userTName:this.personalInfo[0].userTName,
                  idCardType:this.personalInfo[0].idCardType,
                  idCard:this.personalInfo[0].idCard,
                  birthday:this.personalInfo[0].birthday,
                  userMail:this.personalInfo[0].userMail,
                  address:this.personalInfo[0].address,
                };
             this.$http.post('updatePersonalInfo',params).then(
                res=>{
                  if(res.data.flag === 'ok'){
                    this.$message(
                      {
                        type: 'success',
                        message:'修改成功'
                      }
                    )
                    this.dialogFormVisible = false
                  }else{
                    this.$message(
                      {
                        message:'修改失败，请刷新重试'
                      }
                    )
                  }
                },
             )
      },
      // 页面跳转
      personal(){
          this.$router.push('/personal')
      },
      shop(){
          this.$router.push('/shop')
      },
      follow(){
          this.$router.push('/follow')
      },
      home(){
          this.$router.push('/home')
      },
      order(){
          this.$router.push('/order')
      },
      shopManage(){
          this.$router.push('/shopManage')
      },
    },
};
</script>
<style lang = 'less' scoped>
// 布局器样式
.home-container{
    height: 100%;
}
// 头样式
.el-header {
    background-color: #545c64;
    display: flex;
    /* justify-content: space-between;  // 左右贴边 */
    padding-left: 0%;   // 左边界
    align-items: center;
    color:#fff;
    font-size: 20px;
    div{
        display: flex;
        align-items: center;
        span{
            margin-left: 15px;
        }
    }   
}
/* .el-button{
    position: absolute;
    right:10px;
} */
// 主体样式
.el-main {
    background-color: #eaedf1;
}
img{
    width: 55px;
    height: 55px;
}
// 侧边栏
.el-menu{
    height: 100%;
    overflow-y: auto !important;
    text-align: left;
}
// 主界面
.el-main {
    background-color: #E9EEF3;
    color: #333;
    line-height: 160px;
  }
  // 表格界面
  .el-descriptions{
      margin-top: 40px;
  }

</style>